<template>
  <div class="association_info">
    <div class="header">
      <strong class="title">{{title}}</strong>
    </div>
    <div class="container"
         v-loading="value">
      <ul class="newLis">
        <li v-for="(item,index) in associationList"
            :key="index">
          <em>
            <a target="_blank"
               @click="viewDetil(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl)"><img :src="item.iconUrl"
                   alt=""
                   width="30px;"
                   height="30px" /></a>
          </em>
          <a target="_blank"
             :title="item.name"
             @click="viewDetil(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl)"
             style="cursor: pointer;line-height:30px;">
            {{(item.showName===null || item.showName==="")?item.displayName:item.showName}}
          </a>
          <span>--{{item.name}}</span>
        </li>
      </ul>
    </div>
  </div>

</template>
<script>
import util from '@/utils'
export default {
    props: {
        title: String,
        association_info: Array,
        value: Boolean
    },
    computed: {
        associationList () {
            return this.association_info.map(item => {
                if (!util.isEmpty(item.showName)) {
                    item.displayName = item.showName
                }
                return item
            })
        }
    },
    methods: {
    // 对象查看
        viewDetil (objectType, instanceUri, objectUri, name, displayName, icon) {
            let currentUrl = window.location.href
            currentUrl = currentUrl.split('#')[0]
            // if (objectType === 'com.scistor.object.document') {
            //     currentUrl = `${currentUrl}#/obj-show-correlation?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${displayName}&icon=${icon}&name=${name}`
            // } else if (objectType === 'com.scistor.object.media') {
            //     currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${displayName}&icon=${icon}&name=${name}`
            // } else {
            //     }
            currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${displayName}&icon=${icon}&name=${name}`
            window.open(currentUrl)
        }
    }

}
</script>
<style lang="less" scoped>
.association_info {
	.header {
		height: 35px;
		padding: 5px 25px 0px 12px;
		line-height: 30px;
		.title {
			color: #555;
			border-left: solid 4px #999;
			padding-left: 12px;
		}
	}
	.container {
		max-height: 240px;
		min-height: 40px;
		overflow-y: auto;
		padding-bottom: 12px;
		margin-top: 0px;
		margin: 12px;
		box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.13);
		.newLis {
			list-style-type: none;
		}
	}
}
</style>
